
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: AutoComplete: Tag Completion using Query Delimiters</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<style>
#ac-input { width: 250px; }
</style>

</head>
<body id="yahoo-com" class="yui3-skin-sam  yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
			<input name="vs" type="hidden" value="yuilibrary.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN, YUILibrary &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: AutoComplete: Tag Completion using Query Delimiters</h1></div>
</div>
<div id="bd">


	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>AutoComplete: Tag Completion using Query Delimiters</h2>

	<div id="example" class="promo">
	<div class="example-intro">
	<p>
This example demonstrates how to use the <code>queryDelimiter</code> config, a custom result filter, and a couple of event handlers to provide suggestions as a user enters tags in an input field. The result list is prepopulated with suggested tags and is displayed immediately when the input field receives focus rather than waiting for the user to begin typing.
</p>
	</div>

	<div class="module example-container ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam">
                <a href="ac_tagging_clean.html" target="_blank">View example in new window.</a>
            </p>
		</div>		<div id="example-canvas" class="bd">

	
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

	<div id="demo">
  <label for="ac-input">Tags:</label><br>
  <input id="ac-input" type="text">
</div>

<script>
YUI({ filter: 'raw' }).use("autocomplete", "autocomplete-filters", "autocomplete-highlighters", function (Y) {
  var inputNode = Y.one('#ac-input'),
      tags = [
        'css',
        'css3',
        'douglas crockford',
        'ecmascript',
        'html',
        'html5',
        'java',
        'javascript',
        'json',
        'mootools',
        'node.js',
        'pie',
        'yui'
      ];

  inputNode.plug(Y.Plugin.AutoComplete, {
    activateFirstItem: true,
    allowTrailingDelimiter: true,
    minQueryLength: 0,
    queryDelay: 0,
    queryDelimiter: ',',
    source: tags,
    resultHighlighter: 'startsWith',

    // Chain together a startsWith filter followed by a custom result filter
    // that only displays tags that haven't already been selected.
    resultFilters: ['startsWith', function (query, results) {
      // Split the current input value into an array based on comma delimiters.
      var selected = inputNode.ac.get('value').split(/\s*,\s*/);

      // Pop the last item off the array, since it represents the current query
      // and we don't want to filter it out.
      selected.pop();

      // Convert the array into a hash for faster lookups.
      selected = Y.Array.hash(selected);

      // Filter out any results that are already selected, then return the
      // array of filtered results.
      return Y.Array.filter(results, function (result) {
        return !selected.hasOwnProperty(result.text);
      });
    }]
  });

  // When the input node receives focus, send an empty query to display the full
  // list of tag suggestions.
  inputNode.on('focus', function () {
    inputNode.ac.sendRequest('');
  });

  // After a tag is selected, send an empty query to update the list of tags.
  inputNode.ac.after('select', function () {
    inputNode.ac.sendRequest('');
    inputNode.ac.show();
  });
});
</script>

	<!--END SOURCE CODE FOR EXAMPLE =============================== -->

	
		</div>
	</div>
	</div>

	<h3>HTML</h3>

<div id="syntax-4079f4999722e54cd1f5ef94bcaf45be" class="yui-syntax-highlight"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;demo&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">  <span class="sc2">&lt;<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">&quot;ac-input&quot;</span>&gt;</span>Tags:<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">label</span>&gt;&lt;<span class="kw2">br</span>&gt;</span></div></li><li class="li1"><div class="de1">  <span class="sc2">&lt;<span class="kw2">input</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;ac-input&quot;</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;text&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;demo&quot;</span>&gt;</span>
  <span class="sc2">&lt;<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">&quot;ac-input&quot;</span>&gt;</span>Tags:<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">label</span>&gt;&lt;<span class="kw2">br</span>&gt;</span>
  <span class="sc2">&lt;<span class="kw2">input</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;ac-input&quot;</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;text&quot;</span>&gt;</span>
<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></pre></div><textarea id="syntax-4079f4999722e54cd1f5ef94bcaf45be-plain"><div id="demo">
  <label for="ac-input">Tags:</label><br>
  <input id="ac-input" type="text">
</div></textarea></div>
<h3>JavaScript</h3>

<h4>Tags Array</h4>

<p>
While a remote result source could also be used, in this example we'll use the following local array of suggested tags to keep things simple:
</p>

<div id="syntax-bbe223897d8cbb7bdcf14b2371374a30" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> tags <span class="sy0">=</span> <span class="br0">&#91;</span></div></li><li class="li1"><div class="de1">  <span class="st0">'css'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">  <span class="st0">'css3'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">  <span class="st0">'douglas crockford'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">  <span class="st0">'ecmascript'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">  <span class="st0">'html'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">  <span class="st0">'html5'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">  <span class="st0">'java'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">  <span class="st0">'javascript'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">  <span class="st0">'json'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">  <span class="st0">'mootools'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">  <span class="st0">'node.js'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">  <span class="st0">'pie'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">  <span class="st0">'yui'</span></div></li><li class="li2"><div class="de2"><span class="br0">&#93;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> tags <span class="sy0">=</span> <span class="br0">&#91;</span>
  <span class="st0">'css'</span><span class="sy0">,</span>
  <span class="st0">'css3'</span><span class="sy0">,</span>
  <span class="st0">'douglas crockford'</span><span class="sy0">,</span>
  <span class="st0">'ecmascript'</span><span class="sy0">,</span>
  <span class="st0">'html'</span><span class="sy0">,</span>
  <span class="st0">'html5'</span><span class="sy0">,</span>
  <span class="st0">'java'</span><span class="sy0">,</span>
  <span class="st0">'javascript'</span><span class="sy0">,</span>
  <span class="st0">'json'</span><span class="sy0">,</span>
  <span class="st0">'mootools'</span><span class="sy0">,</span>
  <span class="st0">'node.js'</span><span class="sy0">,</span>
  <span class="st0">'pie'</span><span class="sy0">,</span>
  <span class="st0">'yui'</span>
<span class="br0">&#93;</span><span class="sy0">;</span></pre></div><textarea id="syntax-bbe223897d8cbb7bdcf14b2371374a30-plain">var tags = [
  'css',
  'css3',
  'douglas crockford',
  'ecmascript',
  'html',
  'html5',
  'java',
  'javascript',
  'json',
  'mootools',
  'node.js',
  'pie',
  'yui'
];</textarea></div>
<h4>Implementation</h4>

<div id="syntax-8a208c00f0baba32dbeb99df1070ea1f" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;autocomplete&quot;</span><span class="sy0">,</span> <span class="st0">&quot;autocomplete-filters&quot;</span><span class="sy0">,</span> <span class="st0">&quot;autocomplete-highlighters&quot;</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">  <span class="kw2">var</span> inputNode <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#ac-input'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">  inputNode.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">AutoComplete</span><span class="sy0">,</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">    activateFirstItem<span class="sy0">:</span> <span class="kw2">true</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    allowTrailingDelimiter<span class="sy0">:</span> <span class="kw2">true</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    minQueryLength<span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    queryDelay<span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    queryDelimiter<span class="sy0">:</span> <span class="st0">','</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">    source<span class="sy0">:</span> tags<span class="sy0">,</span></div></li><li class="li1"><div class="de1">    resultHighlighter<span class="sy0">:</span> <span class="st0">'startsWith'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">// Chain together a startsWith filter followed by a custom result filter</span></div></li><li class="li1"><div class="de1">    <span class="co1">// that only displays tags that haven't already been selected.</span></div></li><li class="li2"><div class="de2">    resultFilters<span class="sy0">:</span> <span class="br0">&#91;</span><span class="st0">'startsWith'</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>query<span class="sy0">,</span> results<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">      <span class="co1">// Split the current input value into an array based on comma delimiters.</span></div></li><li class="li1"><div class="de1">      <span class="kw2">var</span> selected <span class="sy0">=</span> inputNode.<span class="me1">ac</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'value'</span><span class="br0">&#41;</span>.<span class="me1">split</span><span class="br0">&#40;</span><span class="co2">/\s*,\s*/</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">      <span class="co1">// Pop the last item off the array, since it represents the current query</span></div></li><li class="li2"><div class="de2">      <span class="co1">// and we don't want to filter it out.</span></div></li><li class="li1"><div class="de1">      selected.<span class="me1">pop</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">      <span class="co1">// Convert the array into a hash for faster lookups.</span></div></li><li class="li1"><div class="de1">      selected <span class="sy0">=</span> Y.<span class="me1">Array</span>.<span class="me1">hash</span><span class="br0">&#40;</span>selected<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">      <span class="co1">// Filter out any results that are already selected, then return the</span></div></li><li class="li1"><div class="de1">      <span class="co1">// array of filtered results.</span></div></li><li class="li1"><div class="de1">      <span class="kw1">return</span> Y.<span class="me1">Array</span>.<span class="me1">filter</span><span class="br0">&#40;</span>results<span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>result<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="kw1">return</span> <span class="sy0">!</span>selected.<span class="me1">hasOwnProperty</span><span class="br0">&#40;</span>result.<span class="me1">text</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">      <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#93;</span></div></li><li class="li1"><div class="de1">  <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">  <span class="co1">// When the input node receives focus, send an empty query to display the full</span></div></li><li class="li2"><div class="de2">  <span class="co1">// list of tag suggestions.</span></div></li><li class="li1"><div class="de1">  inputNode.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'focus'</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    inputNode.<span class="me1">ac</span>.<span class="me1">sendRequest</span><span class="br0">&#40;</span><span class="st0">''</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">  <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">  <span class="co1">// After a tag is selected, send an empty query to update the list of tags.</span></div></li><li class="li1"><div class="de1">  inputNode.<span class="me1">ac</span>.<span class="me1">after</span><span class="br0">&#40;</span><span class="st0">'select'</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    inputNode.<span class="me1">ac</span>.<span class="me1">sendRequest</span><span class="br0">&#40;</span><span class="st0">''</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    inputNode.<span class="me1">ac</span>.<span class="me1">show</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">  <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;autocomplete&quot;</span><span class="sy0">,</span> <span class="st0">&quot;autocomplete-filters&quot;</span><span class="sy0">,</span> <span class="st0">&quot;autocomplete-highlighters&quot;</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
  <span class="kw2">var</span> inputNode <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#ac-input'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
  inputNode.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">AutoComplete</span><span class="sy0">,</span> <span class="br0">&#123;</span>
    activateFirstItem<span class="sy0">:</span> <span class="kw2">true</span><span class="sy0">,</span>
    allowTrailingDelimiter<span class="sy0">:</span> <span class="kw2">true</span><span class="sy0">,</span>
    minQueryLength<span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">,</span>
    queryDelay<span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">,</span>
    queryDelimiter<span class="sy0">:</span> <span class="st0">','</span><span class="sy0">,</span>
    source<span class="sy0">:</span> tags<span class="sy0">,</span>
    resultHighlighter<span class="sy0">:</span> <span class="st0">'startsWith'</span><span class="sy0">,</span>
&nbsp;
    <span class="co1">// Chain together a startsWith filter followed by a custom result filter</span>
    <span class="co1">// that only displays tags that haven't already been selected.</span>
    resultFilters<span class="sy0">:</span> <span class="br0">&#91;</span><span class="st0">'startsWith'</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>query<span class="sy0">,</span> results<span class="br0">&#41;</span> <span class="br0">&#123;</span>
      <span class="co1">// Split the current input value into an array based on comma delimiters.</span>
      <span class="kw2">var</span> selected <span class="sy0">=</span> inputNode.<span class="me1">ac</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'value'</span><span class="br0">&#41;</span>.<span class="me1">split</span><span class="br0">&#40;</span><span class="co2">/\s*,\s*/</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
      <span class="co1">// Pop the last item off the array, since it represents the current query</span>
      <span class="co1">// and we don't want to filter it out.</span>
      selected.<span class="me1">pop</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
      <span class="co1">// Convert the array into a hash for faster lookups.</span>
      selected <span class="sy0">=</span> Y.<span class="me1">Array</span>.<span class="me1">hash</span><span class="br0">&#40;</span>selected<span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
      <span class="co1">// Filter out any results that are already selected, then return the</span>
      <span class="co1">// array of filtered results.</span>
      <span class="kw1">return</span> Y.<span class="me1">Array</span>.<span class="me1">filter</span><span class="br0">&#40;</span>results<span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>result<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw1">return</span> <span class="sy0">!</span>selected.<span class="me1">hasOwnProperty</span><span class="br0">&#40;</span>result.<span class="me1">text</span><span class="br0">&#41;</span><span class="sy0">;</span>
      <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="br0">&#93;</span>
  <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
  <span class="co1">// When the input node receives focus, send an empty query to display the full</span>
  <span class="co1">// list of tag suggestions.</span>
  inputNode.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'focus'</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    inputNode.<span class="me1">ac</span>.<span class="me1">sendRequest</span><span class="br0">&#40;</span><span class="st0">''</span><span class="br0">&#41;</span><span class="sy0">;</span>
  <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
  <span class="co1">// After a tag is selected, send an empty query to update the list of tags.</span>
  inputNode.<span class="me1">ac</span>.<span class="me1">after</span><span class="br0">&#40;</span><span class="st0">'select'</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    inputNode.<span class="me1">ac</span>.<span class="me1">sendRequest</span><span class="br0">&#40;</span><span class="st0">''</span><span class="br0">&#41;</span><span class="sy0">;</span>
    inputNode.<span class="me1">ac</span>.<span class="me1">show</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
  <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-8a208c00f0baba32dbeb99df1070ea1f-plain">YUI().use("autocomplete", "autocomplete-filters", "autocomplete-highlighters", function (Y) {
  var inputNode = Y.one('#ac-input');

  inputNode.plug(Y.Plugin.AutoComplete, {
    activateFirstItem: true,
    allowTrailingDelimiter: true,
    minQueryLength: 0,
    queryDelay: 0,
    queryDelimiter: ',',
    source: tags,
    resultHighlighter: 'startsWith',

    // Chain together a startsWith filter followed by a custom result filter
    // that only displays tags that haven't already been selected.
    resultFilters: ['startsWith', function (query, results) {
      // Split the current input value into an array based on comma delimiters.
      var selected = inputNode.ac.get('value').split(/\s*,\s*/);

      // Pop the last item off the array, since it represents the current query
      // and we don't want to filter it out.
      selected.pop();

      // Convert the array into a hash for faster lookups.
      selected = Y.Array.hash(selected);

      // Filter out any results that are already selected, then return the
      // array of filtered results.
      return Y.Array.filter(results, function (result) {
        return !selected.hasOwnProperty(result.text);
      });
    }]
  });

  // When the input node receives focus, send an empty query to display the full
  // list of tag suggestions.
  inputNode.on('focus', function () {
    inputNode.ac.sendRequest('');
  });

  // After a tag is selected, send an empty query to update the list of tags.
  inputNode.ac.after('select', function () {
    inputNode.ac.sendRequest('');
    inputNode.ac.show();
  });
});</textarea></div>
<h3>Complete Example Source</h3>

<div id="syntax-778632c89f44ba0e7707ebdf669ab804" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;demo&quot;</span><span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">  <span class="sy0">&lt;</span>label <span class="kw1">for</span><span class="sy0">=</span><span class="st0">&quot;ac-input&quot;</span><span class="sy0">&gt;</span>Tags<span class="sy0">:&lt;/</span>label<span class="sy0">&gt;&lt;</span>br<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">  <span class="sy0">&lt;</span>input id<span class="sy0">=</span><span class="st0">&quot;ac-input&quot;</span> type<span class="sy0">=</span><span class="st0">&quot;text&quot;</span><span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1"><span class="sy0">&lt;/</span>div<span class="sy0">&gt;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="sy0">&lt;</span>script<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;autocomplete&quot;</span><span class="sy0">,</span> <span class="st0">&quot;autocomplete-filters&quot;</span><span class="sy0">,</span> <span class="st0">&quot;autocomplete-highlighters&quot;</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">  <span class="kw2">var</span> inputNode <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#ac-input'</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">      tags <span class="sy0">=</span> <span class="br0">&#91;</span></div></li><li class="li2"><div class="de2">        <span class="st0">'css'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="st0">'css3'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="st0">'douglas crockford'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="st0">'ecmascript'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="st0">'html'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">        <span class="st0">'html5'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="st0">'java'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="st0">'javascript'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="st0">'json'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="st0">'mootools'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">        <span class="st0">'node.js'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="st0">'pie'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        <span class="st0">'yui'</span></div></li><li class="li1"><div class="de1">      <span class="br0">&#93;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    inputNode.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">AutoComplete</span><span class="sy0">,</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">      activateFirstItem<span class="sy0">:</span> <span class="kw2">true</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">      allowTrailingDelimiter<span class="sy0">:</span> <span class="kw2">true</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">      minQueryLength<span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">      queryDelay<span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">      queryDelimiter<span class="sy0">:</span> <span class="st0">','</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">      source<span class="sy0">:</span> tags<span class="sy0">,</span></div></li><li class="li1"><div class="de1">      resultHighlighter<span class="sy0">:</span> <span class="st0">'startsWith'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">      <span class="co1">// Chain together a startsWith filter followed by a custom result filter</span></div></li><li class="li2"><div class="de2">      <span class="co1">// that only displays tags that haven't already been selected.</span></div></li><li class="li1"><div class="de1">      resultFilters<span class="sy0">:</span> <span class="br0">&#91;</span><span class="st0">'startsWith'</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>query<span class="sy0">,</span> results<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="co1">// Split the current input value into an array based on comma delimiters.</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> selected <span class="sy0">=</span> inputNode.<span class="me1">ac</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'value'</span><span class="br0">&#41;</span>.<span class="me1">split</span><span class="br0">&#40;</span><span class="co2">/\s*,\s*/</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">        <span class="co1">// Pop the last item off the array, since it represents the current query</span></div></li><li class="li1"><div class="de1">        <span class="co1">// and we don't want to filter it out.</span></div></li><li class="li1"><div class="de1">        selected.<span class="me1">pop</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">        <span class="co1">// Convert the array into a hash for faster lookups.</span></div></li><li class="li2"><div class="de2">        selected <span class="sy0">=</span> Y.<span class="me1">Array</span>.<span class="me1">hash</span><span class="br0">&#40;</span>selected<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">        <span class="co1">// Filter out any results that are already selected, then return the</span></div></li><li class="li1"><div class="de1">        <span class="co1">// array of filtered results.</span></div></li><li class="li1"><div class="de1">        <span class="kw1">return</span> Y.<span class="me1">Array</span>.<span class="me1">filter</span><span class="br0">&#40;</span>results<span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>result<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">          <span class="kw1">return</span> <span class="sy0">!</span>selected.<span class="me1">hasOwnProperty</span><span class="br0">&#40;</span>result.<span class="me1">text</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">      <span class="br0">&#125;</span><span class="br0">&#93;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    <span class="co1">// When the input node receives focus, send an empty query to display the full</span></div></li><li class="li1"><div class="de1">    <span class="co1">// list of tag suggestions.</span></div></li><li class="li1"><div class="de1">    inputNode.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'focus'</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">      inputNode.<span class="me1">ac</span>.<span class="me1">sendRequest</span><span class="br0">&#40;</span><span class="st0">''</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">// After a tag is selected, send an empty query to update the list of tags.</span></div></li><li class="li1"><div class="de1">    inputNode.<span class="me1">ac</span>.<span class="me1">after</span><span class="br0">&#40;</span><span class="st0">'select'</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">      inputNode.<span class="me1">ac</span>.<span class="me1">sendRequest</span><span class="br0">&#40;</span><span class="st0">''</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">      inputNode.<span class="me1">ac</span>.<span class="me1">show</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;demo&quot;</span><span class="sy0">&gt;</span>
  <span class="sy0">&lt;</span>label <span class="kw1">for</span><span class="sy0">=</span><span class="st0">&quot;ac-input&quot;</span><span class="sy0">&gt;</span>Tags<span class="sy0">:&lt;/</span>label<span class="sy0">&gt;&lt;</span>br<span class="sy0">&gt;</span>
  <span class="sy0">&lt;</span>input id<span class="sy0">=</span><span class="st0">&quot;ac-input&quot;</span> type<span class="sy0">=</span><span class="st0">&quot;text&quot;</span><span class="sy0">&gt;</span>
<span class="sy0">&lt;/</span>div<span class="sy0">&gt;</span>
&nbsp;
<span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;autocomplete&quot;</span><span class="sy0">,</span> <span class="st0">&quot;autocomplete-filters&quot;</span><span class="sy0">,</span> <span class="st0">&quot;autocomplete-highlighters&quot;</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
  <span class="kw2">var</span> inputNode <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#ac-input'</span><span class="br0">&#41;</span><span class="sy0">,</span>
      tags <span class="sy0">=</span> <span class="br0">&#91;</span>
        <span class="st0">'css'</span><span class="sy0">,</span>
        <span class="st0">'css3'</span><span class="sy0">,</span>
        <span class="st0">'douglas crockford'</span><span class="sy0">,</span>
        <span class="st0">'ecmascript'</span><span class="sy0">,</span>
        <span class="st0">'html'</span><span class="sy0">,</span>
        <span class="st0">'html5'</span><span class="sy0">,</span>
        <span class="st0">'java'</span><span class="sy0">,</span>
        <span class="st0">'javascript'</span><span class="sy0">,</span>
        <span class="st0">'json'</span><span class="sy0">,</span>
        <span class="st0">'mootools'</span><span class="sy0">,</span>
        <span class="st0">'node.js'</span><span class="sy0">,</span>
        <span class="st0">'pie'</span><span class="sy0">,</span>
        <span class="st0">'yui'</span>
      <span class="br0">&#93;</span><span class="sy0">;</span>
&nbsp;
    inputNode.<span class="me1">plug</span><span class="br0">&#40;</span>Y.<span class="me1">Plugin</span>.<span class="me1">AutoComplete</span><span class="sy0">,</span> <span class="br0">&#123;</span>
      activateFirstItem<span class="sy0">:</span> <span class="kw2">true</span><span class="sy0">,</span>
      allowTrailingDelimiter<span class="sy0">:</span> <span class="kw2">true</span><span class="sy0">,</span>
      minQueryLength<span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">,</span>
      queryDelay<span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">,</span>
      queryDelimiter<span class="sy0">:</span> <span class="st0">','</span><span class="sy0">,</span>
      source<span class="sy0">:</span> tags<span class="sy0">,</span>
      resultHighlighter<span class="sy0">:</span> <span class="st0">'startsWith'</span><span class="sy0">,</span>
&nbsp;
      <span class="co1">// Chain together a startsWith filter followed by a custom result filter</span>
      <span class="co1">// that only displays tags that haven't already been selected.</span>
      resultFilters<span class="sy0">:</span> <span class="br0">&#91;</span><span class="st0">'startsWith'</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>query<span class="sy0">,</span> results<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="co1">// Split the current input value into an array based on comma delimiters.</span>
        <span class="kw2">var</span> selected <span class="sy0">=</span> inputNode.<span class="me1">ac</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'value'</span><span class="br0">&#41;</span>.<span class="me1">split</span><span class="br0">&#40;</span><span class="co2">/\s*,\s*/</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
        <span class="co1">// Pop the last item off the array, since it represents the current query</span>
        <span class="co1">// and we don't want to filter it out.</span>
        selected.<span class="me1">pop</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
        <span class="co1">// Convert the array into a hash for faster lookups.</span>
        selected <span class="sy0">=</span> Y.<span class="me1">Array</span>.<span class="me1">hash</span><span class="br0">&#40;</span>selected<span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
        <span class="co1">// Filter out any results that are already selected, then return the</span>
        <span class="co1">// array of filtered results.</span>
        <span class="kw1">return</span> Y.<span class="me1">Array</span>.<span class="me1">filter</span><span class="br0">&#40;</span>results<span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>result<span class="br0">&#41;</span> <span class="br0">&#123;</span>
          <span class="kw1">return</span> <span class="sy0">!</span>selected.<span class="me1">hasOwnProperty</span><span class="br0">&#40;</span>result.<span class="me1">text</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
      <span class="br0">&#125;</span><span class="br0">&#93;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">// When the input node receives focus, send an empty query to display the full</span>
    <span class="co1">// list of tag suggestions.</span>
    inputNode.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'focus'</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
      inputNode.<span class="me1">ac</span>.<span class="me1">sendRequest</span><span class="br0">&#40;</span><span class="st0">''</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">// After a tag is selected, send an empty query to update the list of tags.</span>
    inputNode.<span class="me1">ac</span>.<span class="me1">after</span><span class="br0">&#40;</span><span class="st0">'select'</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
      inputNode.<span class="me1">ac</span>.<span class="me1">sendRequest</span><span class="br0">&#40;</span><span class="st0">''</span><span class="br0">&#41;</span><span class="sy0">;</span>
      inputNode.<span class="me1">ac</span>.<span class="me1">show</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span></pre></div><textarea id="syntax-778632c89f44ba0e7707ebdf669ab804-plain"><div id="demo">
  <label for="ac-input">Tags:</label><br>
  <input id="ac-input" type="text">
</div>

<script>
YUI().use("autocomplete", "autocomplete-filters", "autocomplete-highlighters", function (Y) {
  var inputNode = Y.one('#ac-input'),
      tags = [
        'css',
        'css3',
        'douglas crockford',
        'ecmascript',
        'html',
        'html5',
        'java',
        'javascript',
        'json',
        'mootools',
        'node.js',
        'pie',
        'yui'
      ];

    inputNode.plug(Y.Plugin.AutoComplete, {
      activateFirstItem: true,
      allowTrailingDelimiter: true,
      minQueryLength: 0,
      queryDelay: 0,
      queryDelimiter: ',',
      source: tags,
      resultHighlighter: 'startsWith',

      // Chain together a startsWith filter followed by a custom result filter
      // that only displays tags that haven't already been selected.
      resultFilters: ['startsWith', function (query, results) {
        // Split the current input value into an array based on comma delimiters.
        var selected = inputNode.ac.get('value').split(/\s*,\s*/);

        // Pop the last item off the array, since it represents the current query
        // and we don't want to filter it out.
        selected.pop();

        // Convert the array into a hash for faster lookups.
        selected = Y.Array.hash(selected);

        // Filter out any results that are already selected, then return the
        // array of filtered results.
        return Y.Array.filter(results, function (result) {
          return !selected.hasOwnProperty(result.text);
        });
      }]
    });

    // When the input node receives focus, send an empty query to display the full
    // list of tag suggestions.
    inputNode.on('focus', function () {
      inputNode.ac.sendRequest('');
    });

    // After a tag is selected, send an empty query to update the list of tags.
    inputNode.ac.after('select', function () {
      inputNode.ac.sendRequest('');
      inputNode.ac.show();
    });
});
</script></textarea></div>				</div>
				<div class="yui-u sidebar">
	
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    AutoComplete Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li><a href='../autocomplete/ac_local.html'>Basic Local Data</a></li><li><a href='../autocomplete/ac_jsonp.html'>Remote Data via JSONP</a></li><li><a href='../autocomplete/ac_yql.html'>Remote Data via YQL</a></li><li><a href='../autocomplete/ac_datasource.html'>Remote Data via DataSource</a></li><li class='selected'><a href='../autocomplete/ac_tagging.html'>Tag Completion using Query Delimiters</a></li><li><a href='../autocomplete/ac_flickr.html'>Find Photos on Flickr (Custom Formatting, YQL Source)</a></li><li><a href='../autocomplete/ac_filter.html'>Filter a Set of Existing Items on the Page</a></li>							</ul>
						</div>
					</div>

					<div class="mod box4">
                        <div class="hd">
						<h4>More AutoComplete Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/autocomplete/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_autocomplete.html">API Documentation</a></li></ul>
                        </div>
					</div>
			  </div>
		</div>

		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator/index.html">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="Internationalization - Functional Examples" href="../../examples/intl/index.html">Internationalization</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="JSONP (JSON with Padding) - Functional Examples" href="../../examples/jsonp/index.html">JSONP <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Recordset - Functional Examples" href="../../examples/recordset/index.html">Recordset <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Resize - Functional Examples" href="../../examples/resize/index.html">Resize <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Sortable - Functional Examples" href="../../examples/sortable/index.html">Sortable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="Transition - Functional Examples" href="../../examples/transition/index.html">Transition <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Uploader - Functional Examples" href="../../examples/uploader/index.html">Uploader <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YQL Query - Functional Examples" href="../../examples/yql/index.html">YQL Query <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="selected "><a title="AutoComplete - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Charts - Functional Examples" href="../../examples/charts/index.html">Charts <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataTable - Functional Examples" href="../../examples/datatable/index.html">DataTable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Dial - Functional Examples" href="../../examples/dial/index.html">Dial <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Editor - Functional Examples" href="../../examples/editor/index.html">Editor <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="ScrollView - Functional Examples" href="../../examples/scrollview/index.html">ScrollView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="TabView - Functional Examples" href="../../examples/tabview/index.html">TabView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Grids - Functional Examples" href="../../examples/cssgrids/index.html">CSS Grids <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2011 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script language="javascript"> 
var yuiConfig = { filter: 'raw' };
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
